<template>
    <div id="index">
        <el-row class="container">
            <el-col :span="6" class="leftnav">
                <div class="img">
                    <img src="../assets/logo.png"  height="60px" alt="">
                </div>
                
                <!-- router-link 可以替代普通的 a 链接 -->
                <router-link to="/UserManagement"><i class="el-icon-user" style="margin-right: 15px;"></i>用户管理</router-link> 
                <router-link to="/PurchaseManagement"><i class="el-icon-truck" style="margin-right: 15px;"></i>进货管理</router-link> 
                <router-link to="/Supplier"><i class="el-icon-s-cooperation" style="margin-right: 15px;"></i>供货商</router-link> 
                <router-link to="/StoreManagement"><i class="el-icon-s-shop" style="margin-right: 15px;"></i>门店管理</router-link> 
                <router-link to="/DrugManagement"><i class="el-icon-goods" style="margin-right: 15px;"></i>药品管理</router-link> 
                <router-link to="/DrugType"><i class="el-icon-menu" style="margin-right: 15px;"></i>药品类型</router-link> 
                <router-link to="/OrderManagement"><i class="el-icon-s-order" style="margin-right: 15px;"></i>订单管理</router-link> 
                <router-link to="/RightsManagement"><i class="el-icon-s-custom" style="margin-right: 15px;"></i>权限管理</router-link> 
            </el-col>  

            <el-col :span="20" class="content">
                <!-- 只要在项目中安装和配置了 vue-router ，就可以使用 router-view 这个组件了 -->
                <!-- 它的作用很单纯：占位符（占位符是一个出口，最后在出口展示组件） -->
                <router-view></router-view>
            </el-col>    
        </el-row>        
    </div>       
</template>
  
<style lang="less">
    #index {
        height: 100%;
        .container {
            height: 100%;
            display: flex;
            .leftnav {
                // height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                background-color: #f2f6ff;
                a {
                    border-radius: 10px;
                    display: block;
                    width: 150px;
                    height: 16px;
                    padding: 30px;
                    font-weight: bold;
                    font-size: 25px;
                    color: #2c3e50;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    // 清除下划线
                    text-decoration: none;
                    &.router-link-exact-active {
                        color: #fff;
                        background: #0f6bb1;
                        box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.3);
                    }
                    &.router-link-active {
                        color: #fff;
                        background: #0f6bb1;
                        box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.3);
                    }
                }
                img {
                    width: 160px;
                    padding: 20px;
                    margin: 15px;
                    border-bottom: 1px #d7d7d7  solid;
                }
            }
            .content {
                height: 100%;
                background-color: #e4f4fe;
                
            }
        }
    }
    
</style>

<script>
  
</script>